import React, { useState, useEffect, useRef } from 'react'

// children - 传入的内容，即调用组件时写在首位标签之间的内容
// v - 每秒移动多少个像素

export default ({ children, v = 100, delay = 0,onStart }) => {
    const wrapRef = useRef() // 动画容器
    const contentRef = useRef() // 动画内容
    const [show, setShow] = useState(false)
    useEffect(() => {
        const wrapWidth = wrapRef.current.offsetWidth // 容器宽度
        const contentWidth = contentRef.current.scrollWidth // 内容宽度

        // 使用css3的过渡实现
        const deltaX = contentWidth + wrapWidth // 移动距离
        const deltaT = deltaX / v + 's' // 周期
        // console.log('~~deltaX,deltaT，v', deltaX, deltaT, v)
        contentRef.current.style.transitionTimingFunction = 'linear' // 线性动画

        const animation = () => {
            // 每个周期的开始，先让内容归位
            contentRef.current.style['transition-duration'] = '0s'
            contentRef.current.style.transform = `translateX(${wrapWidth}px)`
            // 设置过渡时间和目标
            setTimeout(() => {
                contentRef.current.style.transitionDuration = deltaT
                contentRef.current.style.transform = `translateX(${-contentWidth}px)`
            }, 100)
            onStart&&onStart()
        }
        let timer
        setTimeout(() => {
            animation()
            timer = setInterval(() => {
                animation()
            }, deltaX * 1000 / v + 100)
            setShow(true)

        }, delay * 1000)



        return () => {
            clearInterval(timer)
        }
    }, [])

    return <div className={'m-moving'}>
        <div className={'wrap'} ref={wrapRef} >
            <div className={'content'} ref={contentRef} style={{ visibility: show ? 'visible' : 'hidden' }}>{children}</div>
        </div>
    </div>

}
